<template>
  <div class="box">
    <Footer/>
    <div class="search">
      <div class="search-1">
        <span class="iconfont icon-sousuoxiantiao"></span>
        <input
          type="text"
          name=""
          id=""
          @keydown.enter="ss()"
          ref="val"
          v-model="sou"
          @click="isShow = true"
          placeholder="搜索大益/中茶、下关"
        />
        <img
          src="http://www.sxtour.com/html_app/img/search/cancel.png"
          alt=""
          v-show="isShow"
          @click="none()"
        />
      </div>
      <span @click="fun()">取消</span>
    </div>
    <strong class="hot">热门搜索</strong>
    <div class="hint">
      <ul>
        <li>
          <span> 中茶 </span>
          <p>&gt;</p>
        </li>
        <li>
          <span> 大益 </span>
          <p>&gt;</p>
        </li>
        <li>
          <span> 下关 </span>
          <p>&gt;</p>
        </li>
        <li>
          <span> 七彩云南 </span>
          <p>&gt;</p>
        </li>
        <li>
          <span> 八角亭 </span>
          <p>&gt;</p>
        </li>
        <li>
          <span> 紫砂 </span>
          <p>&gt;</p>
        </li>
      </ul>
    </div>
    <strong class="delet"
      ><span>历史记录</span
      ><img
        src="http://www.sxtour.com/html_app/img/search/rubbrish.png"
        alt=""
        @click="del()"
    /></strong>
    <ul>
      <li v-for="(v, i) in arr" :key="i">{{ v }}</li>
    </ul>
  </div>
</template>

<script>
import Footer from "../components/footer.vue"
export default {
  components:{
        Footer
    },
  data() {
    return {
      isShow: false,
      sou: "",
      arr: [],
      //   newarr: [],
    };
  },
  methods: {
    none() {
      this.$refs.val.value = "";
    },
    del() {
      this.arr = "";
    },
    ss() {
      let cont = this.$refs.val.value;
      for (let i in this.arr) {
        if (this.arr[i] == cont) {
          cont = "";
          // this.remove.cont
        }
      }
      this.arr.push(cont);
      console.log(this.arr);
    },
    fun() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.search img {
  position: absolute;
  width: 0.15rem;
  height: 0.15rem;
  right: 0.7rem;
  display: none;
}
li {
  color: #000;
  margin-left: 5%;
  list-style: none;
}
.hint {
  width: 100%;
  padding: 0.1rem;
  margin-top: 0.2rem;
}
.hint ul {
  width: 100%;
}
.hint ul li {
  height: 0.5rem;
  line-height: 0.5rem;
  color: #606266;
  border-bottom: 0.01rem solid gainsboro;
  display: flex;
  justify-content: space-between;
}
.hint ul li p {
  font-size: 0.2rem;
}
.search {
  height: 0.47rem;
  overflow: hidden;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.03rem 0.2rem;
  border-bottom: 1px solid gainsboro;
}
.search .icon-sousuoxiantiao {
  font-size: 0.2rem;
  color: gray;
}
.search-1 {
  background: gainsboro;
  border-radius: 0.2rem;
  overflow: hidden;
  padding-left: 0.05rem;
}
.search input {
  width: 90%;
  height: 0.35rem;
  text-indent: 0.2rem;
  color: #96d2fa;
  border: none;
  border-radius: 0.2rem;
  background: gainsboro;
}
.search span {
  font-size: 0.14rem;
  color: #96d2fa;
}
.hot,
.delet {
  color: #000;
  font-size: 0.2rem;
  margin: 0.1rem 5%;
  display: block;
  border-bottom: 1px solid gainsboro;
  height: .5rem;
  line-height: .5rem;
}
.delet {
  display: flex;
  justify-content: space-between;
}
.delet span {
  color: #000;
}
.delet img {
  width: 0.2rem;
  height: 0.22rem;
}
</style>